<template>
  <div class="tab">
    <div class="tab__innber">
      <div
        class="tab-item"
        v-for="item in tabs"
        :class="{ 'tab-item__active': item.value == active }"
        @click="handleClick(item)"
      >
        {{ item.label }}
      </div>
    </div>
  </div>
</template>
<script setup>
const active = defineModel({ type: Number })
const tabs = ref([
  { label: '即时', value: 0 },
  { label: '预约', value: 1 },
  // { label: '口报', value: 2 },
])
const { state, store } = inject('Sell')
const handleClick = item => {
  active.value = item.value
  state.userdialogshow = false
}
</script>
<style lang="scss" scoped>
.tab {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  // margin-bottom: 14px;
  background-color: #fff;
  border-bottom: 1px solid #ff7900;
}

.tab__innber {
  // border-radius: 16px;
  overflow: hidden;
  display: flex;
}

.tab-item {
  background-color: #f5f5f5;
  width: 80px;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
  // border-radius: 4px;
  font-family: PingFangSC;
  font-size: 16px;
  font-weight: 600;
  // color: #fff;
  background-color: #fafafa;
  color: #8a8a8a;
}

.tab-item__active {
  // background-color: rgba(71, 172, 255, 0.1);;
  // color: #252a30;
  background-color: var(--pcmain-color);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
</style>
